<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/custom.css" />
  </head>

  <body>
    <div id="app">
      <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
          <div class="page-header">
            <h2>Router Basic - 02</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
            <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
            <a class="list-group-item" v-link="{ path: '/about'}">About</a>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template id="home">
      <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
      </div>
      <div>
        <ul class="nav nav-tabs">
          <li>
            <a v-link="{ path: '/home/news'}">News</a>
          </li>
          <li>
            <a v-link="{ path: '/home/message'}">Messages</a>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </template>

    <template id="news">
      <ul>
        <li>News 01</li>
        <li>News 02</li>
        <li>News 03</li>
      </ul>
    </template>
    <template id="message">
      <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
      </ul>
    </template>

    <template id="about">
      <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
      </div>
    </template>
  </body>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
  <script>
    var Home = Vue.extend({
      template: "#home",
      data: function () {
        return {
          msg: "Hello, vue router!",
        };
      },
    });

    var News = Vue.extend({
      template: "#news",
    });

    var Message = Vue.extend({
      template: "#message",
    });

    var About = Vue.extend({
      template: "#about",
    });

    var router = new VueRouter();
    router.redirect({
      "/": "/home",
    });
    router.map({
      "/home": {
        component: Home,
        // 定义子路由
        subRoutes: {
          "/news": {
            component: News,
          },
          "/message": {
            component: Message,
          },
        },
      },
      "/about": {
        component: About,
      },
    });

    var App = Vue.extend({});
    router.start(App, "#app");
  </script>
</html>
